<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天</title>
    <script src="/js/vue.js"></script>
    <style>
        .showChat{
            background-color: #ccc;
            line-height: 30px;
            width: 500px;
        }
        body{
            background: white;
        }
    </style>
</head>
<body>
<div id="fatherDiv">
    <div id="show" >
        <div v-for="item in str" class="showChat">
            {{ item }}
        </div>
        <br/><br/>
        发送消息:
        <input type="text" v-model="message">&nbsp;&nbsp; <input type="button" value="点我发送" @click="click1" id="toChat"><br/>
        <br/>
        接收消息:
    </div>
</div>
</body>
<!--导入vue   -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm1=new Vue({
        el:"#show",
        data:{
            message:"",
            str: []
        },
        methods:{
            click1(){
                this.str.push(this.message)
                this.message=""
            }
        }
    });
</script>
</html>